// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
import com.nokia.meego 1.0
import "functions.js" as ExtFunc

Page {
    id: mainPage

    tools: commonTools

    signal newAccount(string name,string secretkey);
    Component.onCompleted: {
        theme.inverted = true
    }

    Rectangle {
        x: 0
        y: 0
        width: parent.width
        height: parent.height

        color: "black"

        Label {
            id: information
            anchors {
                top:  parent.top
                left: parent.left
                right: parent.right
                margins: 10
            }

            width: parent.width
            color: "white"

            text: "Enter this verification code if prompted during account sign-in:"
            wrapMode: Text.WordWrap
        }

        Component {
            id: accountDelegate

            Item {
                id: wrapper
                ListView.onRemove: SequentialAnimation {
                    PropertyAction { target: wrapper; property: "ListView.delayRemove"; value: true }
                    NumberAnimation { target: wrapper; property: "scale"; to: 0; duration: 250; easing.type: Easing.InOutQuad }
                    PropertyAction { target: wrapper; property: "ListView.delayRemove"; value: false }
                }
                width: parent.width;
                height: 90
                x: 10

                anchors.bottomMargin: 10
                anchors.topMargin: 10

                Timer {
                    interval: 1000
                    running: true
                    repeat: true
                    onTriggered: {
                        itemCode.opacity -= 1/30
                        var newCode = ExtFunc.getcode(secretkey)
                        if (itemCode.text!=newCode) {
                            itemCode.text = newCode
                            codeRenewal.restart();
                            itemCode.opacity = 1
                        }
                    }
                }

                Timer {
                    id: codeRenewal
                    // Interval in milliseconds. It must be interval values.
                    interval: 30000
                    // Setting running to true indicates start the timer. It must be boolean  value.
                    running: true
                    //If repeat is set true, the timer will repeat at specified interval. Here it is 1000 milliseconds.
                    repeat: true
                    // This will be called when the timer is triggered. Here the
                    // subroutine changeBoxColor() will be called at every 1 seconde (1000 milliseconds)
                    onTriggered: {
                        itemCode.text = ExtFunc.getcode(secretkey)
                        itemCode.opacity = 1
                    }
                }
                Row {
                    id: data
                    spacing: 20

                    Image {
                        y: 10
                        source: "qrc:/edit-clear.png"
                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true

                            onClicked: {
                                deleteAccountQuery.message = name
                                deleteAccountQuery.open()
                                deleteAccountQuery.index = index

                                //deleteAccountDialog.accountName = name
                                //deleteAccountDialog.secretkey = secretkey
                                //deleteAccountDialog.index = index
                                //deleteAccountDialog.opacity = 0.9
                            }
                        }
                    }

                    Column {
                        Text {
                            text: name
                            font.pixelSize: 18
                            color: "white"
                        }
                        Text {
                            id: itemCode
                            text: ExtFunc.getcode(secretkey)
                            font.pixelSize: 40
                            color: "white"
                        }
                    }
                }
                Rectangle {
                    id: line
                    anchors.top:  data.bottom
                    height: 2
                    width: mainPage.width
                    color: "#3060c8"
                }
            }
        }


        ListView {
            id: accounts
            anchors.top: information.bottom
            anchors.topMargin: 10
            model: accountModel
            delegate: accountDelegate
            height: parent.height-information.height
            width: parent.width
            focus: true
            highlightRangeMode:  ListView.StrictlyEnforceRange
        }

        QueryDialog {
            property int index: 0

            id: deleteAccountQuery

            titleText: "Delete account"
            acceptButtonText: "Ok"
            rejectButtonText: "Cancel"

            onAccepted: {
                logic.removeAccount(index)
            }
        }
    }
}
